<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="../abcjs-audio.css">
  <link rel="stylesheet" href="examples-styles.css" />

  <title>Swing with Editor</title>
  <script src="../dist/abcjs-basic.js" type="text/javascript"></script>
  <script type="text/javascript">
    var editor;
    var renderParams = { selectTypes: false };
    var synthOptions = {};
    var swingElement;
    var codeEl;
    var abcEl;
    window.onload = function () {
      abcEl = document.querySelector("#abc");
      swingElement = document.querySelector(".swing-value");
      codeEl = document.querySelector(".editor-code");

      editor = new ABCJS.Editor("abc", {
        canvas_id: "paper",
        warnings_id: "warnings",
        abcjsParams: renderParams,
        synth: {
          el: "#audio",
          options: { displayRestart: true, displayPlay: true, displayProgress: true, options: {} }
        }
      });

      swingElement.addEventListener("change", paramChanged);
      paramChanged();
    };

    function paramChanged() {
      var output = 'new ABCJS.Editor("abc", {\n' +
        '  canvas_id: "paper",\n' +
        '  warnings_id: "warnings",\n' +
        '  abcjsParams: renderParams,\n' +
        '  synth: {\n' +
        '    el: "#audio",\n' +
        '    options: {\n' +
        '      displayRestart: true, displayPlay: true, displayProgress: true,\n' +
        '      options: synthOptions\n' +
        '    }\n' +
        '  },\n' +
        '});'

      editor.paramChanged(renderParams);

      synthOptions = { swing: parseFloat(swingElement.value, 10) };
      editor.synthParamChanged(synthOptions);

      output = output.replace("renderParams", JSON.stringify(renderParams));
      output = output.replace("synthOptions", JSON.stringify(synthOptions));
      codeEl.innerHTML = output;
    }
  </script>
  <style>
  </style>
</head>

<body>
  <header>
    <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
    <h1>abcjs swing with editor</h1>
  </header>
  <div class="container">
    <main>
      <p>This demonstrates the addition of swing in a tune.
        The swing is added to the MIDI player, so it is not reflected in the sheet music.
        The swing is represented as a percentage of the duration of the first note to the
        duration of the pair of eighth notes.
        The default is 50%, which is no swing; both eights have the same duration and the ratio is 1:1.
        66% is a common value for triplet-swing, with a 2:1 ratio of the first note to the second.
        Other common swing values are 60% which corresponds to a 3:2 ratio of the first note to the second and 57%
        which corresponds to a 4:3 ratio.
        The maximum value of swing is 75; in this case the first half of the pair is 3 times longer than the second
        half.
        resulting to a 3:1 ratio or a dotted-eighth followed by a sixteenth note.
      </p>
      <p>In the example below, change the value of the swing to see how it matches of differs from the explicit
        triplets of dotted eighth and sixteenth notes.
      </p>
      <p>
        Swing is supported in all X/4 and X/8 meters. In a X/8 meter the sixteenths swing.
        You can try a X/8 meter by changing the meter in the ABC string to "M: 4/8
        L: 1/16"
        However, meter changes in the middle of a tune do not affect the main swing duration.
      </p>
      <section class="input">
        <h2>ABC String</h2>
        <textarea aria-label="ABC string" id="abc" spellcheck="false">
M:4/4
L:1/8
Q:1/8=140
"^swung notes"cc cc cc cc | "^triplets"(3:2:2c2c (3:2:2c2c (3:2:2c2c (3:2:2c2c | 
"^swung notes"cc cc cc cc | "^dotted eighth and sixteenth"c>c c>c c>c c2 | 
"^swung notes"zc cz cc zc |"^sixteenths are not affected in a 4/4"c/c/c/c/ z/c/c/z/ c/c/z/c/ c/z/c/c/ | 
                  </textarea>
        <fieldset>
          <legend>Options</legend>
          <h2>Swing Parameters</h2>
          <label>Swing:
            <input class="swing-value" type="number" min="50" max="75" step="1" value="60">
          </label>
        </fieldset>
      </section>

      <section class="output">
        <h2>Output</h2>
        <div id="audio"></div>
        <div id="warnings"></div>
        <div id="paper" class="visible-background"></div>
      </section>

      <section class="explanation">
        <h2>Code Sample</h2>
        <pre class="editor-code">
        </pre>
      </section>
    </main>
  </div>
</body>

</html>